<template>
  <view :style="colorStyle">
    <view
      class="couponModule"
      :style="{
        paddingTop: `${info.style.pTop * 2}rpx`,
        paddingLeft: `${info.style.pLeft * 2}rpx`,
        paddingRight: `${info.style.pRight * 2}rpx`,
        paddingBottom: `${info.style.pBottom * 2}rpx`,
        marginTop: `${info.style.mTop * 2}rpx`,
        marginLeft: `${info.style.mLeft * 2}rpx`,
        marginRight: `${info.style.mRight * 2}rpx`,
        marginBottom: `${info.style.mBottom * 2}rpx`,
        background: `${info.bgColor}`,
      }"
    >
      <view class="info1" v-if="list.length !== 0">
        <block v-for="(item, index, key) in list" :key="item.id">
          <view
            v-if="index < 2"
            class="list flex aitems"
            :style="{
              background: `${info.bgColor2}`,
            }"
          >
            <view class="left">
              <view class="price">
                <span
                  class="unit"
                  :style="{
                    color: `${
                      info.colorType == 2 ? info.textColor : 'var(--view-theme)'
                    }`,
                  }"
                  >￥</span
                >
                <span
                  class="num"
                  :style="{
                    color: `${
                      info.colorType == 2 ? info.textColor : 'var(--view-theme)'
                    }`,
                  }"
                  >{{ item.money }}</span
                >
              </view>
              <view
                class="price1"
                :style="{
                  color: `${
                    info.colorType == 2 ? info.textColor : 'var(--view-theme)'
                  }`,
                }"
              >
                <view v-if="item.minPrice > 0"
                  >满{{ item.minPrice }}元使用</view
                >
                <view v-if="item.minPrice <= 0">无门槛</view>
              </view>
              <view
                class="label"
                :style="{
                  color: `${
                    info.colorType == 2 ? info.color : 'var(--view-theme)'
                  }`,
                  border: `1px solid ${
                    info.colorType == 2 ? info.color : 'var(--view-theme)'
                  }`,
                  background: `${
                    info.colorType == 2
                      ? hexToRgb(info.color)
                      : 'var(--view-minorColorT)'
                  }`,
                }"
              >
                {{ couponsUseType[item.useType] }}
              </view>
            </view>
            <view class="border"></view>
            <view class="right flex aitems between">
              <view class="couponinfo">
                <view
                  class="name"
                  :style="{
                    color: `${
                      info.colorType == 2 ? info.textColor : 'var(--view-theme)'
                    }`,
                  }"
                >
                  {{ item.name }}
                </view>
                <!-- <view
                  class="time"
                  :style="{
                    color: `${
                      info.colorType == 2 ? info.textColor : 'var(--view-theme)'
                    }`,
                  }"
                >
                  <view v-if="item.isFixedTime == 1"
                    >有效期至 {{ item.useEndTime }}</view
                  >
                  <view v-if="item.isFixedTime == 0"
                    >有效期至 {{ item.day }}</view
                  >
                </view> -->
                <view
                  @click="couponDescriptionChange(item)"
                  class="log flex aitems"
                  :style="{
                    color: `${
                      info.colorType == 2 ? info.textColor : 'var(--view-theme)'
                    }`,
                  }"
                >
                  <u-icon
                    name="search"
                    size="22"
                    :color="`${
                      info.colorType == 2 ? info.textColor : 'var(--view-theme)'
                    }`"
                  ></u-icon>
                  <span>查看使用说明</span>
                </view>
              </view>
              <view
                class="couponbtn"
                @click="save(item)"
                :style="{
                  background: `${
                    item.isGet == 1
                      ? '#ccc'
                      : info.colorType == 2
                      ? info.color
                      : 'var(--view-theme)'
                  }`,
                }"
              >
                {{ couponIsGet[item.isGet] }}
              </view>
            </view>
          </view>
        </block>
      </view>

      <view class="more flex aitems jcenter" v-if="list.length > 2">
        <view class="flex aitems" @click="gourl(`/pages/coupon/coupon`)">
          <view>查看更多</view>
          <u-icon name="arrow-right" size="12"></u-icon>
        </view>
      </view>
    </view>

    <u-popup
      mode="bottom"
      :safeAreaInsetBottom="false"
      :show="show"
      :overlayStyle="{ 'touch-action': 'none' }"
      bgColor="transparent"
      @close="show = false"
    >
      <coupon-description :value="detail.brief" @closeChange="show = false" />
    </u-popup>
  </view>
</template>

<script>
import { couponPage, couponReceive } from "@/servers/servers";
import { HTTP_STATUS } from "@/servers/config";
import colors from "@/mixins/color";
import { getGloBalData, getStorage, getToken } from "@/utils/storage";
import { loading, go, msg } from "@/utils/wxAPI";
import { couponsUseType, couponIsGet } from "@/keys/keys";
import { formatDate } from "@/utils/util";
import { getEnv } from "@/utils/env";
export default {
  mixins: [colors],
  props: {
    info: {
      default: {},
    },
  },
  data() {
    return {
      detail: {},
      show: false,
      couponsUseType,
      couponIsGet,
      loadingPage: false,
      list: [],
      total: 0,
      current: 1,
    };
  },
  async mounted() {
    if (getToken()) {
      await this.couponPage();
    }
  },
  methods: {
    couponDescriptionChange(info) {
      this.detail = info;
      this.show = true;
    },
    async couponPage() {
      loading();
      let { data } = await couponPage({
        current: this.current,
        size: 10,
        status: 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        list.map((item) => {
          // if (item.isFixedTime == 0) {
          //   let time1 =
          //     new Date(item.createTime.replace(/-/g, "/")).getTime() +
          //     1000 * 60 * 60 * 24 * item.day;
          //   item.day = formatDate(time1).dateValue;
          // }
        });
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    async save(item) {
      // #ifdef MP-WEIXIN
      if (!getGloBalData("is_authorization")) {
        return go(`/pages/reg/reg`);
      }
      // #endif
      // #ifdef H5
      if (getEnv() == "WX_PUBLIC") {
        if (!getStorage("is_authorization")) {
          return go(`/pages/reg/reg`);
        }
      }
      // #endif
      loading();
      let { data } = await couponReceive({
        id: item.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        msg(data.msg);
        this.current = 1;
        this.couponPage();
      }
    },
    hexToRgb(hex, o) {
      // 移除十六进制颜色中的'#'
      let sanitizedHex = hex.replace("#", "");

      // 解析红、绿、蓝色值
      let r = parseInt(sanitizedHex.substring(0, 2), 16);
      let g = parseInt(sanitizedHex.substring(2, 4), 16);
      let b = parseInt(sanitizedHex.substring(4, 6), 16);

      return `rgb(${r}, ${g}, ${b},${o})`;
    },
    gourl(url) {
      go(url);
    },
  },
};
</script>

<style lang="scss" scoped>
.couponModule {
  position: relative;
  overflow: hidden;

  .info1 {
    position: relative;
    z-index: 1;

    .list {
      padding: 20rpx 32rpx;
      background: #fff;
      border-radius: 28rpx;
      margin: 0 0 24rpx 0;
      box-shadow: 0px 4px 20px 0 rgba(0, 0, 0, 0.06);

      .left {
        width: 160rpx;
        text-align: center;

        .price {
          color: #1f1f1f;
          font-weight: bold;

          .unit {
            font-size: 40rpx;
          }

          .num {
            font-size: 64rpx;
          }
        }

        .price1 {
          font-size: 24rpx;
          color: #1f1f1f;
        }

        .label {
          margin: 16rpx auto 0;
          color: #5ccedd;
          font-size: 24rpx;
          border-radius: 10rpx;
          border: 2rpx solid #5ccedd;
          background: #ebfdff;
          width: 140rpx;
          height: 42rpx;
          line-height: 42rpx;
          text-align: center;
        }
      }

      .border {
        border-left: 2rpx dashed #858585;
        width: 2rpx;
        height: 160rpx;
        margin: 0 20rpx;
      }

      .right {
        width: calc(100% - 160rpx - 44rpx);

        .couponinfo {
          width: 250rpx;

          .name {
            color: #1f1f1f;
            font-size: 32rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .time {
            color: #525252;
            font-size: 24rpx;
            margin: 24rpx 0 0;
          }

          .log {
            color: #525252;
            font-size: 24rpx;
            margin-top: 8rpx;

            span {
              margin-left: 4rpx;
            }
          }
        }

        .couponbtn {
          border-radius: 40rpx;
          background: #5ccedd;
          display: flex;
          padding: 12rpx 30rpx;
          justify-content: center;
          align-items: center;
          gap: 10rpx;
          color: #fff;
          font-size: 24rpx;
          //   margin-left: 40rpx;
        }
      }
    }
  }
}
.more {
  font-size: 24rpx;
  padding: 20rpx 0;
  color: #999999;
}
</style>
